<template>
  <div>
    <V-CommonHeaderLeft>
      <div id="app">
        <el-row>
          <!-- 头部 -->
          <div class="header">
            <el-col :span="3" class="header-nav">
              <router-link to="/">首页&nbsp;&nbsp;/</router-link>
              <router-link to="/">应用&nbsp;&nbsp;/</router-link>
              <router-link to="/">短信提醒</router-link>
            </el-col>
            <el-col :span="1" :offset="20">
              <img src alt class="img">
            </el-col>
          </div>
          <div class="contents">
            <h3>|短信充值</h3>
            <div class="contents-header">
              <div class="contents-header-left">
                <p>0</p>
                <p>可发短信条数</p>
              </div>
              <div class="contents-header-right">
                <p @click="xianFa()">发送明细</p>
                <p @click="xianChong()">充值明细</p>
                <p @click="xianInfo()">充值</p>
                <div class="tanFa" v-if="showFa">
                  <el-row class="tanFa-row">
                    <el-col :span="3">短信发送明细</el-col>
                    <el-col
                      :span="1"
                      :offset="20"
                      style="color:#808080;cursor:pointer"
                      @click.native="hiddenFa()"
                    >X</el-col>
                  </el-row>
                  <el-row class="tanFaRow">
                    <el-col :span="2">姓名</el-col>
                    <el-col :span="4">接收号码</el-col>
                    <el-col :span="2">类型</el-col>
                    <el-col :span="4">发送时间</el-col>
                    <el-col :span="4">短信内容</el-col>
                  </el-row>
                </div>
                <div class="tanChong" v-if="showChong">
                  <el-row class="tanChong-row">
                    <el-col :span="3">短信发送明细</el-col>
                    <el-col
                      :span="1"
                      :offset="20"
                      style="color:#808080;cursor:pointer"
                      @click.native="hiddenChong()"
                    >X</el-col>
                  </el-row>
                  <el-row class="tanChongRow">
                    <el-col :span="3">日期</el-col>
                    <el-col :span="6">充值金额(元)</el-col>
                    <el-col :span="4">充值条数</el-col>
                    <el-col :span="6">备注</el-col>
                  </el-row>
                </div>
                <div class="tanInfo" v-if="showInfo">
                  <el-row class="tanInfo-row">
                    <el-col :span="3">短信充值</el-col>
                    <el-col
                      :span="1"
                      :offset="20"
                      style="color:#808080;cursor:pointer"
                      @click.native="hiddenInfo()"
                    >X</el-col>
                  </el-row>
                  <div class="tanInfo-p">
                    <p>短信费用</p>
                    <p>0.1元/条,最低100元起充值</p>
                    <p>付款方式</p>
                    <p>开户名称：深圳云上科技有限公司</p>
                    <p>银行账号：79140154740026241</p>
                    <p>开户银行：上海浦东发展银行龙华支行</p>
                    <p>汇款后，请联系您的专属客服进行充值</p>
                    <p @click="hiddenInfo()">知道了</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="custor">
              <h3>|开通客户账户短信设置</h3>
              <div class="custor-top">
                <div class="custor-left">
                  <el-row class="custorRow">
                    <el-col :span="2" class="custor-td1">公司名称</el-col>
                    <el-col :span="2" class="custor-td2">
                      <el-input v-model="input" placeholder="素然时尚服饰集团" style="width:525px"></el-input>
                    </el-col>
                  </el-row>
                  <el-row class="custorRow">
                    <el-col :span="2" class="custor-td1">商城网址</el-col>
                    <el-col :span="2" class="custor-td2">
                      <el-input
                        v-model="input"
                        placeholder="https://store116.ysdinghuo.com"
                        style="width:525px"
                        :disabled="true"
                      >></el-input>
                    </el-col>
                  </el-row>
                  <el-row class="custorRow">
                    <el-col :span="2" class="custor-td1">联系人</el-col>
                    <el-col :span="2" class="custor-td2">
                      <el-input v-model="input" placeholder="素然时尚服饰集团" style="width:525px"></el-input>
                    </el-col>
                  </el-row>
                  <el-row class="custorRow">
                    <el-col :span="2" class="custor-td1">手机号码</el-col>
                    <el-col :span="2" class="custor-td2">
                      <el-input v-model="input" placeholder="素然时尚服饰集团" style="width:525px"></el-input>
                    </el-col>
                  </el-row>
                  <el-row class="custorRow">
                    <el-col :span="2" class="custor-td1">发送条件</el-col>
                    <el-col :span="2" class="custor-td2" style="display:flex;">
                      <el-radio v-model="radio" label="1" style="margin-top:10px">不发送短信</el-radio>
                      <el-radio v-model="radio" label="2" style="margin-top:10px">
                        开通客户账号时发送短信
                        <span class="custor-span">？</span>
                      </el-radio>
                    </el-col>
                  </el-row>
                </div>
                <div class="custor-right">
                  <p>短信预览</p>
                  <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="textarea"
                    style="width:100%;margin-top:30px;"
                  ></el-input>
                </div>
              </div>
            </div>
            <div class="info">
              <h3>|发送短信给员工</h3>
              <table cellspacing="0" cellpadding="0" class="infoTable">
                <tr class="infoTr1">
                  <td width="100px">分类</td>
                  <td width="240px">操作(勾选启用)</td>
                  <td width="850px">短信预览</td>
                </tr>
                <tr class="infoTr2">
                  <td>客户</td>
                  <td>
                    <el-checkbox v-model="checkedzhu1">客户注册</el-checkbox>
                  </td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
                <tr class="infoTr3">
                  <td height="90px">订货</td>
                  <td>
                    <div style="border-bottom:1px solid #e3e3e3">
                      <el-checkbox v-model="checkedzhu2">提交订单</el-checkbox>
                    </div>
                    <div>
                      <el-checkbox v-model="checkedzhu3">订单付款</el-checkbox>
                    </div>
                  </td>
                  <td>
                    <div style='padding-left:10px;border-bottom:1px solid #e3e3e3'>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</div>
                    <div style='padding-left:10px;'>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</div>
                  </td>
                </tr>
                <tr class="infoTr2">
                  <td>财务</td>
                  <td>
                    <el-checkbox v-model="checkedzhu4">收款审核</el-checkbox>
                  </td>
                  <td>您有新的收款单需要审核，付款人[张三丰]，付款金额：5000元，请尽快登录订货系统管理后台进行审核</td>
                </tr>
              </table>
              <div class="info-zhu">
                <p>备注：订货提醒短信默认发送给客户的所属员工，如未设置所属员工则发送给企业联系人，财务审核短信发送财务负责人</p>财务负责人
                <el-select v-model="value" placeholder="请选择" style="margin-left:20px;width:325px;">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="send">
              <h3>|发送短信给员工</h3>
              <table cellspacing="0" cellpadding="0" class="infoTable">
                <tr class="infoTr1">
                  <td width="100px">分类</td>
                  <td width="240px">操作(勾选启用)</td>
                  <td width="850px">短信预览</td>
                </tr>
                <tr class="sendTr2">
                  <td height="90px">客户</td>
                  <td>
                    <div style="border-bottom:1px solid #e3e3e3">
                      <el-checkbox v-model="checkedSend">审核通过</el-checkbox>
                    </div>
                    <div>
                      <el-checkbox v-model="checked1">审核驳回</el-checkbox>
                    </div>
                  </td>
                  <td>
                    <div style='padding-left:10px;border-bottom:1px solid #e3e3e3'>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</div>
                    <div style='padding-left:10px;'>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</div>
                  </td>
                </tr>
                <tr class='sendTrs'>
                  <td></td>
                  <td><el-checkbox v-model="checked2">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
                 <tr class='sendTrs'>
                  <td></td>
                  <td><el-checkbox v-model="checked3">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
                 <tr class='sendTrs'>
                  <td>客户</td>
                  <td><el-checkbox v-model="checked4">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
                 <tr class='sendTrs'>
                  <td></td>
                  <td><el-checkbox v-model="checked5">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
                 <tr class='sendTrs'>
                  <td></td>
                  <td><el-checkbox v-model="checked6">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>

                 <tr class='sendTrs4'>
                  <td style='border-bottom:0'></td>
                  <td><el-checkbox v-model="checked7">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
                 <tr class='sendTrs4'>
                  <td style='border:0'>财务</td>
                  <td><el-checkbox v-model="checked8">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
                 <tr class='sendTrs4'>
                  <td style='border:0'></td>
                  <td><el-checkbox v-model="checked9">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
                 <tr class='sendTrs4'>
                  <td style='border:0'></td>
                  <td><el-checkbox v-model="checked10">审核通过</el-checkbox></td>
                  <td>您的商城有新的客户注册了，注册号码：18726372674，请登录订货系统后台进行审核</td>
                </tr>
              </table>
              <div class="send-zhu">
                <p>备注：客户短信的联系人信息默认为该客户所属业务员，如未设置则为企业默认联系人</p>
              </div>
            </div>
             <div class="footer">
          <router-link to=/>保存</router-link>
        </div>
          </div>
        </el-row>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from './../../../components/common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      // 发送短信明细
      showFa: false,
      // 充值明细
      showChong: false,
      // 充值
      showInfo: false,
      input: '',
      textarea: '',
      radio: '1',
      checkedzhu1: false,
      checkedzhu2: false,
      checkedzhu3: false,
      checkedzhu4: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      checked6: false,
      checked7: false,
      checked8: false,
      checked9: false,
      checked10: false
    }
  },
  methods: {
    xianFa () {
      this.showFa = true
    },
    hiddenFa () {
      this.showFa = false
    },
    xianChong () {
      this.showChong = true
    },
    hiddenChong () {
      this.showChong = false
    },
    xianInfo () {
      this.showInfo = true
    },
    hiddenInfo () {
      this.showInfo = false
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 90%;
  background-color: #f2f5f7;
  height: 100%;
  padding: 15px 10px 0px 10px;
}
.header {
  height: 45px;
  .header-nav {
    line-height: 30px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    padding-left: 10px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    a {
      color: #999999;
    }
    a:hover {
      color: #20ade5;
    }
  }
  .img {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #dce4e7;
  }
}
.header-nav a:nth-child(3) {
  color: #333;
}
.header-nav a:nth-child(3):hover {
  color: #333;
}
.contents {
  width: calc(100%-15px);
  background-color: #fff;
  height: 480px;
  padding: 40px 0px 0px 15px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.contents > h3 {
  font-size: 16px;
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 10px;
}
.contents-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 10px;
}
.contents-header-left {
  margin-top: 50px;
}
.contents-header-left > p:nth-child(1) {
  color: #20ade5;
  font-weight: bold;
  font-size: 22px;
}
.contents-header-left > p:nth-child(2) {
  color: #999999;
  font-size: 13px;
  margin-top: 10px;
}
.contents-header-right {
  display: flex;
  margin-top: 70px;
}
.contents-header-right > p {
  width: 98px;
  height: 38px;
  font-size: 12px;
  line-height: 38px;
  text-align: center;
  margin-left: 15px;
  color: #37b5e8;
  cursor: pointer;
}
.contents-header-right > p:nth-child(1) {
  border: 1px solid #20ade5;
}
.contents-header-right > p:nth-child(2) {
  border: 1px solid #20ade5;
}
.contents-header-right > p:nth-child(3) {
  background-color: #37b5e8;
  height: 40px;
  width: 100px;
  color: #fff;
}
.tanFa {
  position: absolute;
  left: 130px;
  top: 100px;
  width: 900px;
  height: 300px;
  border: 1px solid;
  background-color: #fff;
}
.tanFa-row {
  padding: 10px 10px 0px 10px;
  height: 50px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e3e3e3;
}
.tanFaRow {
  margin: 10px;
  background-color: #fcfcfc;
  height: 50px;
  line-height: 50px;
  color: #666666;
  font-size: 12px;
  text-align: center;
}
.tanChong {
  position: absolute;
  left: 130px;
  top: 100px;
  width: 800px;
  height: 400px;
  border: 1px solid;
  background-color: #fff;
}
.tanChong-row {
  padding: 10px 10px 0px 10px;
  height: 50px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
}
.tanChongRow {
  margin: 10px;
  background-color: #fcfcfc;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}
.tanInfo {
  position: absolute;
  left: 130px;
  top: 100px;
  width: 600px;
  height: 300px;
  border: 1px solid;
  background-color: #fff;
}
.tanInfo-row {
  padding: 10px 10px 0px 10px;
  height: 50px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e3e3e3;
}
.tanInfo-p {
  font-size: 18px;
  padding: 20px 0px 0px 20px;
}
.tanInfo-p > p {
  margin-bottom: 5px;
}
.tanInfo-p > p:nth-child(1) {
  color: #999999;
  font-size: 12px;
}
.tanInfo-p > p:nth-child(3) {
  color: #999999;
  font-size: 12px;
}
.tanInfo-p > p:nth-child(7) {
  color: #999999;
}
.tanInfo-p > p:last-child {
  width: 80px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  background-color: #20ade5;
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  margin-left: 80%;
  cursor: pointer;
}
.custor {
}
.custor > h3 {
  font-size: 16px;
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  padding: 20px 0px 10px 0px;
  font-weight: normal;
}
.custorRow {
  color: #666;
  font-size: 12px;
  padding-top: 10px;
}
.custor-td1 {
  margin-top: 10px;
}
.custor-td2 {
  margin-left: 10px;
}
.custor-top {
  display: flex;
  justify-content: space-between;
}
.custor-left {
  width: 50%;
}
.custor-right {
  width: 45%;
}
.custor-right > p {
  margin-top: 20px;
}
.custor-span {
  margin-top: 10px;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #d2d2d2;
  color: #fff;
  font-size: 12px;
  text-indent: 0.25em;
  line-height: 15px;
  position: relative;
  top: -25px;
  left: 180px;
}
.info > h3 {
  font-size: 16px;
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  padding: 20px 0px 10px 0px;
  font-weight: normal;
}
.infoTable {
  border: 1px solid #e3e3e3;
  border-collapse: collapse;
  border-top: 0;
}
.infoTable td {
}
.infoTr1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #fcfcfc;
  color: #666;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}
.infoTr1 > td:last-child {
  padding-left: 10px;
  text-align: left;
}
.infoTr2 {
  height: 45px;
  line-height: 45px;
  border: 1px solid #e3e3e3;
  color: #666;
  font-size: 12px;
  text-align: center;
}
.infoTr2 > td {
  border: 1px solid #e3e3e3;
}
.infoTr2 > td:last-child {
  padding-left: 10px;
  text-align: left;
}
.infoTr3 > td:last-child {
  text-align: left;
}
.infoTr3 > td {
  border: 1px solid #e3e3e3;
  line-height: 45px;
  border: 1px solid #e3e3e3;
  color: #666;
  font-size: 12px;
  text-align: center;
}
.sendTr2 > td:last-child {
  text-align: left;
}
.sendTr2 > td {
  border: 1px solid #e3e3e3;
  line-height: 45px;
  border: 1px solid #e3e3e3;
  color: #666;
  font-size: 12px;
  text-align: center;
}
.infoRowFour {
  width: 100%;
  height: 47px;
  line-height: 47px;
  border: 1px solid #e3e3e3;
  color: #666;
  font-size: 12px;
  text-align: center;
  margin-top: 4px;
}
.info-zhu {
  margin-top: 20px;
  font-size: 12px;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 15px;
}
.info-zhu > p {
  color: #999999;
  margin: 0px 0px 15px 0px;
}
.send {
}
.send > h3 {
  font-size: 16px;
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  padding: 20px 0px 10px 0px;
  font-weight: normal;
}
.sendTh {
  width: 100%;
  line-height: 40px;
  height: 40px;
  background-color: #fcfcfc;
  border: 1px solid #e3e3e3;
  color: #666;
  font-size: 12px;
  padding-left: 65px;
  margin-top: 20px;
  border-bottom: 0;
}
.sendTd1 {
  width: 100%;
  line-height: 45px;
  height: 90px;
  background-color: #fcfcfc;
  border: 1px solid #e3e3e3;
  color: #666;
  font-size: 12px;
  text-align: center;
}
.sendTd2 {
  width: 100%;
  line-height: 45px;
  border: 1px solid #e3e3e3;
  color: #666;
  font-size: 12px;
  text-align: center;
  padding-top: 4px;
  border-bottom: 0;
  border-left: 0;
}
.td2Cus {
  border-right: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  height: 235px;
  line-height: 229px;
  width: 150px;
}
.sendTd3 {
  width: 100%;
  height: 45px;
  line-height: 45px;
  border: 1px solid #e3e3e3;
  color: #666;
  font-size: 12px;
  text-align: center;
  margin-top: 13px;
}
.sendTrs {
  height:45px;
  line-height:45px;
  text-align:center;
  color:#666;
  font-size:12px;
}
.sendTrs >td {
  border:1px solid #e3e3e3;
}
.sendTrs >td:last-child{
  text-align:left;
  padding-left:10px;
}
.sendTrs>td:first-child{
  border:0px
}
.sendTrs4>td {
  border:1px solid #e3e3e3;
}
.sendTrs4 {
  height:45px;
  line-height:45px;
  text-align:center;
  color:#666;
  font-size:12px;
}
.sendTrs4 >td:last-child{
  text-align:left;
  padding-left:10px;
}
.send-zhu {
  padding-bottom:65px;
}
.send-zhu >p{
  color:#999;
  font-size:12px;
  padding:20px 0px;
  border-bottom:1px solid #e3e3e3;
}
.footer {
  height:65px;
  width:88.5%;
  background-color:#fff;
  border-top:1px solid #e3e3e3;
  position:fixed;
  bottom:0;
  z-index:5;
  left:10px;
  margin-left:120px;
  // left:-100px;
}
.footer>a {
  display:block;
  width:150px;
  height:45px;
  color:#fff;
  background-color:#63C6ED;
  border-radius: 3px;
  text-align: center;
  line-height:45px;
  float:right;
  margin-top:10px;
}
</style>
